<!-- 新增或编辑菜单 -->
 <template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140">
        <Row>
            <Col span="12">
                <FormItem label="GPRS卡号" prop="GPRS_CODE">
                    <Input v-model="formValidate.GPRS_CODE" placeholder="请输入GPRS卡号"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="网关标识" prop="GATEWAY_ID">
                    <Input v-model="formValidate.GATEWAY_ID" placeholder="请输入网关标识"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="网关名称" prop="GATEWAY_NAME">
                    <Input v-model="formValidate.GATEWAY_NAME" placeholder="请输入网关名称"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="网关型号" prop="GATEWAY_TYPE">
                    <Select v-model="formValidate.GATEWAY_TYPE" placeholder="请选择网关型号">
                        <Option :value="item.value" v-for="item in typeCodeList" v-bind:key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem></Col
            >
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="出厂日期" prop="FACTORY_DATE">
                    <DatePicker
                        type="date"
                        placeholder="请选择出厂日期"
                        v-model="formValidate.FACTORY_DATE"
                        style="width: 100%"
                    ></DatePicker>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="所属建筑" prop="BD_GUID">
                    <treeselect
                        :options="options"
                        v-model="formValidate.BD_GUID"
                        :disable-branch-nodes="true"
                        :show-count="true"
                        placeholder="请选择所属建筑"
                    /> </FormItem
            ></Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="网关软件版本号" prop="VERSION">
                    <Input v-model="formValidate.VERSION" placeholder="请输入网关软件版本号"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="最大终端数量" prop="MAX_COUNT">
                    <Input type="number" v-model="formValidate.MAX_COUNT" placeholder="请输入最大终端数量"></Input> </FormItem
            ></Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="采集IP" prop="GATEWAYIP">
                    <Select v-model="formValidate.GATEWAYIP" placeholder="请选择采集IP">
                        <Option :value="item" v-for="item in cjIpList" v-bind:key="item">{{ item }}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="采集端口" prop="GATEWAYPORT">
                    <Select v-model="formValidate.GATEWAYPORT" placeholder="请选择采集端口">
                        <Option :value="item" v-for="item in cjDkList" v-bind:key="item">{{ item }}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="排序号" prop="ORDER_NO">
                    <Input type="number" v-model="formValidate.ORDER_NO" placeholder="请输入排序号"></Input> </FormItem
            ></Col>
            <Col span="12">
                <FormItem label="安装时间" prop="INSTALL_TIME">
                    <DatePicker
                        type="date"
                        placeholder="请选择安装时间"
                        v-model="formValidate.INSTALL_TIME"
                        style="width: 100%"
                        @on-change="
                            (e) => {
                                changeTime(e)
                            }
                        "
                    ></DatePicker>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12">
                <FormItem label="安装地址" prop="INSTALL_ADDRESS">
                    <Input v-model="formValidate.INSTALL_ADDRESS" placeholder="请输入安装地址"></Input>
                </FormItem>
            </Col>
            <Col span="12"> </Col>
        </Row>

        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> -->
        </FormItem>
    </Form>
</template>



<script>
import {AjaxCommon} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility, IconNames} from '@/libs/utility'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    props: ['setData', 'allMenu', 'type'],
    components: {Treeselect},
    data() {
        return {
            typeCodeList: [],
            itemMenu: {},
            showIcon: false,
            iconList: [],
            value: null,
            options: [],
            // 采集ip
            cjIpList: [],
            // 采集端口
            cjDkList: [],
            formValidate: {
                GATEWAY_GUID: '',
                GPRS_CODE: '',
                GATEWAY_ID: '',
                GATEWAY_NAME: '',
                GATEWAY_TYPE: '',
                FACTORY_DATE: '',
                VERSION: '',
                SOFTWARE_VERSION: '',
                MAX_COUNT: '',
                GATEWAYIP: '',
                GATEWAYPORT: '',
                ORDER_NO: '',
                INSTALL_TIME: '',
                INSTALL_ADDRESS: '',
                BD_GUID: '',
                ORG_ID: ''
            },
            ruleValidate: {
                BD_GUID: [{required: true, message: '请选择所属建筑', trigger: 'blur'}],
                GATEWAY_TYPE: [{required: true, message: '请选择网关型号', trigger: 'change'}],
                GATEWAY_NAME: [{required: true, message: '请输入网关名称', trigger: 'blur'}],
                GATEWAY_ID: [
                    {
                        required: true,
                        message: '请输入网关标识',
                        trigger: 'blur'
                    },
                    {
                        message: '只能包含字母和数字',
                        trigger: 'blur',
                        pattern: /^[A-Za-z0-9]+$/
                    }
                ],
                GATEWAYIP: [{required: true, message: '请选择采集IP', trigger: 'change'}],
                GATEWAYPORT: [{required: true, message: '请选择采集端口', trigger: 'change'}],
                INSTALL_TIME: [{required: true, type: 'string', message: '请选择安装时间', trigger: 'blur'}],
                INSTALL_ADDRESS: [{required: true, message: '请输入安装地址', trigger: 'blur'}]
            }
        }
    },
    methods: {
        changeTime(e) {
            this.formValidate.INSTALL_TIME = e
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.formValidate.SOFTWARE_VERSION = this.formValidate.VERSION
                    this.$emit('getData', this.formValidate)
                }
            })
        },
        // handleReset(name) {
        //     this.$refs[name].resetFields()
        // }
        async initParentMenu() {
            const allBuild = await AjaxCommon(`/api/Build/GetAllBuild`, 'get', null)
            console.log(allBuild)
            const buildList = allBuild?.data?.Message ?? []
            let allBuildTree = []
            if (buildList.length > 0) {
                allBuildTree = Utility.arrayCascade(buildList, (c, p) => c.PARENT_BD_GUID == p.BD_GUID, 'children')
            }
            if (allBuildTree && allBuildTree.length > 0) {
                let treeDataList = []
                Utility.createBuildTreeData(allBuildTree, treeDataList)
                if (treeDataList && treeDataList.length > 0) {
                    this.options = [
                        {
                            id: '',
                            label: '顶级建筑'
                        }
                    ].concat(treeDataList)
                }
            } else {
                this.options = [
                    {
                        id: '',
                        label: '顶级建筑'
                    }
                ]
            }
        },
        initData() {
            // 网关型号
            Utility.getDictListByTypeCode('WGXH').then((res) => {
                if (res && res.length > 0) {
                    const data = res.map((t) => {
                        return {
                            value: t.value,
                            label: t.desc
                        }
                    })
                    this.typeCodeList = data
                }
            })

            // IP和端口LIST
            AjaxCommon('/api/ServiceConfig/GetIpAndPort', 'get', null).then((res) => {
                this.cjIpList = res.data.Message?.ip?.map((t) => t.id)
                this.cjDkList = res.data.Message?.port?.map((t) => t.id)
            })
        }
    },
    created() {
        this.initData()
        // 编辑 或 新增子级
        if (this.setData) {
            const PICK_PORT = this.setData.PICK_PORT
            const sp = PICK_PORT?.split(':')
            this.formValidate = this.setData
            this.formValidate.GATEWAYIP = sp?.[0]
            this.formValidate.GATEWAYPORT = sp?.[1]
            this.formValidate.VERSION = this.setData.SOFTWARE_VERSION
        }
        this.initParentMenu()
    },
    mounted() {
        this.$nextTick(() => {})
    }
}
</script>

<style lang="scss">
.selectIcon {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 156px;
    z-index: 999999;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    .bi {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
}
</style>
